<template>
	<view>
		<view class="topBack" :class="{
			'aishishang':params.columnType == 1,
			'aiziji':params.columnType == 2,
			'xiangshangqian':params.columnType == 4,
		}">
			<view class="" style="height: 88px;">
				
			</view>
			<view class="px-20">
				<view class="search round-4 flex items-center" @click="$tab.nav(`/pages/search`)">
					<u-icon name="search" color="#F61564" size="20"></u-icon>
					<view class="ml-16">
						搜索您想要的
					</view>
				</view>
				
				<view class="flex items-center justify-between mt-48 bg-FFF pb-24" style="margin-top: 56rpx;">
					<view class="text-32 flex items-center" v-for="(item,index) in screenList" :key="item.name"
						@click="screenClick(index)">
						<view class="" :style="{
							fontWeight:index == screenIndex ? '700' : '400'
						}">
							{{item.name}}
						</view>
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImg/index/${item.image()}`" class="image-20"
							mode="" v-if="item.name == '价格'"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="params.columnType == 3 || params.columnType == 6 || params.columnType == 7 || params.columnType == 5">
			<uni-nav-bar :title="title" left-icon="back" @clickLeft="$tab.back()" :border="false" :status-bar="true"
				:fixed="true" background-color="transparent" color="#FFF">
			</uni-nav-bar>
		</view>

		<view class="" v-else>
			<uni-nav-bar :title="title" left-icon="back" @clickLeft="$tab.back()" :border="false" :status-bar="true"
				:fixed="true" background-color="transparent" color="#FFF"
				:left-width="params.columnType >= 1 ? '400rpx': ''">
				<!-- #ifndef MP-WEIXIN -->
				<block slot="left" v-if="params.columnType >= 1">
					<u-icon name="arrow-leftward" :color="params.columnType == 2 ? '#000' : '#FFF'" size="20"></u-icon>
					<image :src="navImage" style="height: 44rpx;" class="ml-16" mode="heightFix"></image>
				</block>
				<!-- #endif -->
			</uni-nav-bar>
		</view>
		
		<view class="" style="height: 326rpx;">
			
		</view>

		<view class="px-20 py-20 relative">
			<view class="mt-28">
				<ProductsList :params="params" ref="ProductsList" :width="710"></ProductsList>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				statusbar: uni.getSystemInfoSync().statusBarHeight + 44,
				// orderByWay 1价格降序 2价格升序 3销量降序 4创建时间降序
				screenList: [{
						name: "综合",
						value: ""
					},
					{
						name: "最新",
						value: 4
					},
					{
						name: "销量",
						value: 3
					},
					{
						name: "价格",
						value: 1,
						image: () => {
							return this.screenIndex == 3 ? (this.screenList[3].value == 1 ?
									'icon_jiage_zhengxu@2x.png' : 'icon_jiage_zhengxu.png') :
								'icon_jiage_zhengxuh.png'
						}
					}
				],
				screenIndex: 0,
				params: null
			};
		},
		computed: {
			navImage() {
				switch (this.params.columnType) {
					case '1':
						return 'https://file.fulewanjia.com/fulewanjia/profile/appImages/aishishang-nav.png'
						break
					case '2':
						uni.setNavigationBarColor({
							frontColor: '#000000',
							backgroundColor: 'transparent',
						})
						return 'https://file.fulewanjia.com/fulewanjia/profile/appImages/aiziji-nav.png'
						break
					case '4':
						return 'https://file.fulewanjia.com/fulewanjia/profile/appImages/xiangshengqian-nav.png'
						break
					case '5':
						return 'https://file.fulewanjia.com/fulewanjia/profile/appImages/ganen-nav.png'
						break
				}
			}
		},
		onLoad(e) {
			this.title = e.title || e.name

			this.params = e
			if (e.typeId == "null") {
				delete this.params.typeId
			}
		},
		onReachBottom() {
			this.$refs.ProductsList.loadList()
		},
		methods: {
			screenClick(index) {
				this.screenIndex = index
				if (index == 3) {
					this.screenList[3].value = this.screenList[3].value == 2 ? 1 : 2
				}
				this.params = {
					...this.params,
					orderByWay: this.screenList[index].value
				}
				this.$refs.ProductsList.refreshList()
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	.topBack {
		height: 326rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages2/shuzi-nav@2x.png') no-repeat;
		background-size: 100% 100%;
	}

	.aishishang {
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/aishishang.png') no-repeat;
		background-size: 100% 100%;
	}

	.aiziji {
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/aiziji.png') no-repeat;
		background-size: 100% 100%;
	}

	.xiangshangqian {
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/xiangshengqian.png') no-repeat;
		background-size: 100% 100%;
	}

	.ganen {
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/ganen.png') no-repeat;
		background-size: 100% 100%;
	}
	
	/deep/ .uni-navbar{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.search {
		border: 1rpx solid #FA554E;
		height: 72rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 154rpx 154rpx 154rpx 154rpx;
		border: 3rpx solid #FFFFFF;
		line-height: 72rpx;
		padding-left: 16rpx;
		color: #F61564;
	}
</style>